<template>
  <div class="category">
    <!-- 搜索框  van-sticky粘性布局 -->
    <van-sticky>
      <nav-bar class="nav-bar">
        <template #left>
          <i class="iconfont icon-saoma" />
        </template>
        <template #center>
          <div class="nav-bar-center">
            <i class="iconfont icon-iconseach"></i>
            <span>搜索</span>
          </div>
        </template>
        <template #right>
          <i class="iconfont icon-msg" />
        </template>
      </nav-bar>
    </van-sticky>
    <div style="display: flex">
      <!-- 分类菜单 -->
      <i-menu style="width: 100px" :menus="menus" @change="querySubCategory" />
      <!-- 分类菜单列表 -->
      <i-list style="flex: 1" :subMenus="subMenus" />
    </div>
  </div>
</template>

<script>
import { queryCategory, querySubCategory } from '../../api'
import IList from '../../components/i-list/i-list.vue'
import IMenu from '../../components/i-menu/i-menu.vue'
import NavBar from '../../components/nav-bar/nav-bar.vue'
export default {
  components: {
    NavBar,
    IList,
    IMenu
  },
  data() {
    return {
      menus: [],
      subMenus: []
    }
  },
  methods: {
    // 查询分类菜单
    async queryCategory() {
      this.menus = await queryCategory()
    },
    // 查询分类菜单列表
    async querySubCategory(maitKey) {
      this.subMenus = await querySubCategory(maitKey)
    }
  },
  mounted() {
    this.queryCategory()
    this.querySubCategory('3627')
  }
}
</script>

<style lang="less" scoped>
.nav-bar {
  background: white;
}
.nav-bar-center {
  background: var(--gray-shallow);
  text-align: left;
  line-height: 28px;
  border-radius: 28px;
  font-size: 12px;
  color: var(--gray-moderate);

  .icon-iconseach {
    font-size: 12px;
    margin: 0 5px 0 10px;
  }
}
.category::-webkit-scrollbar {
  width: 0;
}
</style>
